<template>
    <view class="feedbackPageStyle">
        <view class="warper">
            <u-search placeholder="请输入关键字" v-model="searchValue" :height="40" bgColor="#fff" borderColor="#f2f2f2"
                @search="onSearch" @custom="onSearch"></u-search>
            <scroll-view :scroll-y="true" class="cardWrap" @scrolltolower="onScrollToLower">
                <!-- 组件 -->
                <view v-if="planList.length">
                    <view class="itemStyle" v-for="item in planList" :key="item.id" @click="onGoDetaile(item)">
                        <view class="leftStyle">
                            <view class="title">{{ item.questionText }}</view>
                            <view class="subTitle">
                                <text>反馈时间：{{ item.insertDate.split(" ")[0] }}</text>
                                <text style="margin-left: 30rpx;">{{item.status==1?'未处理':'已处理' }}</text>
                            </view>
                        </view>
                        <view class="rightStyle" @click="showFkData=item;isShowFkPopup=true;">
                            <text style="color: #666666; font-size: 24rpx">查看</text>
                            <image :src="'../static/images/teachingMaterial/leftArrow.svg'"
                                style="width: 16rpx;height: 24rpx;margin-left: 8rpx;" />
                        </view>
                    </view>
                    <!-- <u-loadmore :status="loadStatus" @loadmore="onLoadmore" /> -->
                </view>
                <view v-else style="margin-top: 20%">
                    <u-empty text="暂无数据" mode="list"></u-empty>
                </view>
            </scroll-view>
        </view>
        <view class="botAddBtn" @click="isAddFkPopup = true">
            <image src="../static/images/question/addTk.svg" style="width: 36rpx;height: 36rpx; margin-right: 22rpx;" />
            <text>新增反馈</text>
        </view>
        <BotMenu :isPopup="isAddFkPopup" @close="remarkContent = ''; isAddFkPopup = false" title="新增反馈" :showCancel="true">
            <view style="padding: 48rpx 30rpx;">
                <view style="background-color: #F9F9F9;border-radius: 24rpx;padding: 22rpx 34rpx;min-height: 180rpx;">
                    <textarea v-model="remarkContent" :border="'none'" class="xzt-placeholder"
                        style="width:100%;min-height: 180rpx;" :placeholder="`请输入反馈信息`" :maxlength="-1"
                        :auto-height="true">
                    </textarea>
                </view>
            </view>
            <view class="botMenuOkBtn center" @click="onOk">
                确定
            </view>
        </BotMenu>
        <BotMenu :isPopup="isShowFkPopup" @close="isShowFkPopup = false" title="查看反馈" :showCancel="true">
            <scroll-view  :scroll-y="true"  style="padding: 48rpx 42rpx;" class="showFkPopupStyle" >
                <view class="flex flex-column" style="align-items: flex-end;margin-bottom: 40rpx;">
                    <view class="khInfo">
                        {{ showFkData.questionText }}
                    </view>
                    <view class="subTitle" style="padding-right: 30rpx;padding-top: 10rpx"> 反馈:{{ showFkData.insertDate }}</view>
                </view>
                <view class="flex flex-column" style="align-items: flex-start;" v-if="showFkData.replyText">
                    <view class="myInfo">
                        {{ showFkData.replyText }}
                    </view>
                    <view class="subTitle" style="padding-left: 30rpx;padding-top: 10rpx;">反馈:{{ showFkData.replyTime }}</view>
                </view>
            </scroll-view>
            <!-- <view class="botMenuOkBtn center" @click="onOk">
                确定
            </view> -->
        </BotMenu>
    </view>
</template>

<script>
// import moment from "moment";
import { listArtificialFeed ,newArtificialFeed} from "./services/myQuestionBankService"
export default {
    data() {
        return {
            searchValue: "", //搜索的值
            safeAreaInsets: {},
            planList: [],
            //加载前值为loadmore，加载中为loading，没有数据为nomore
            loadStatus: 'loadmore',
            // 文档信息
            pInfo: {},
            // 查询
            queryData: {
                // pageNo: 1,
                // pageSize: 10,
                queryKey: "",
                artificialFileUuid: "",
            },
            // 新增反馈
            isAddFkPopup: false,
            // 查看反馈
            isShowFkPopup: false,
            // 查看反馈的数据
            showFkData: {},
            // 反馈信息
            remarkContent:""
        }
    },
    onLoad(option) {
        const info = JSON.parse(decodeURIComponent(option.info)) || {};
        this.pInfo = info;
        // this.queryData = { ...this.queryData, artificialFileUuid: info.uuid }
    },
    onShow() {
        if (this.pInfo && Object.keys(this.pInfo).length) {
            console.log(this.pInfo,"--107")
            this.queryData = { ...this.queryData, artificialFileUuid: this.pInfo.uuid }
        }
    },
    computed: {},
    methods: {
        //加载更多触发
        onLoadmore() {
            console.log("onLoadmore")
            // this.planList = [...this.planList, ...[2, 3, 4]]
            this.queryData = {
                ...this.queryData,
                pageNo: this.queryData.pageNo + 1
            }
        },
        onScrollToLower(e) {
            if (this.loadStatus === 'loadmore') {
                this.queryData = {
                    ...this.queryData,
                    pageNo: this.queryData.pageNo + 1
                }
            }
        },
        // 去详情页
        onGoDetaile(record) {
            // uni.navigateTo({
            //     url: `/dataDocument/showFileDetailDoc?info=${encodeURIComponent(JSON.stringify(record))}`
            // })
        },
        // 获取数据      
        // onGetListData(queryData) {
        //     this.loadStatus = 'loading'
        //     listArtificialFeed(queryData).then(res => {
        //         let newListData = queryData.pageNo === 1 ? [...res.datas] : [...this.planList, ...res.datas]
        //         // console.log(newListData)
        //         if (newListData.length >= res.totalCount) {
        //             this.loadStatus = 'noMore'
        //         } else {
        //             this.loadStatus = 'loadmore'
        //         }
        //         console.log(newListData, "---98")
        //         this.planList = newListData
        //     }).catch(err => {
        //         this.loadStatus = 'loadmore'
        //     })
        // },
        onGetListData(queryData) {
            listArtificialFeed(queryData).then(res => {
                this.planList = res||[]
            }).catch(err => {
               
            })
        },
        // 搜索
        onSearch() {
            this.queryData = {
                ...this.queryData,
                queryKey: this.searchValue,
                // pageNo: 1
            }
        },
        // 新增反馈
        onOk() {
            newArtificialFeed({ artificialFileUuid: this.pInfo.uuid, remark: this.remarkContent}).then(res => {
                this.queryData={...this.queryData}
                this.remarkContent = ""
                this.isAddFkPopup = false
            })
           
        }
    },
    beforeMount() {

        uni.getSystemInfo({
            success: (res) => {
                // console.log(res, "--26")
                this.windowWidth = res.windowWidth
                this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })

    },
    watch: {
        queryData: {
            handler: function (newData, oldData) {
                if (newData?.artificialFileUuid) {
                    this.onGetListData(newData)
                }
            },
            deep: true
        }
    },


}
</script>

<style lang="scss">
page {
    background: #ffffff !important;
}

.feedbackPageStyle {
    padding: 30rpx;
    /* height: 100vh; */
    width: 100vw;
    box-sizing: border-box;

    .warper {
        width: 100%;
        height: 100%;
        margin-top: 32rpx;

        .cardWrap {
            height: calc(100vh - 208rpx - 112rpx);
            margin-top: 32rpx;

            .itemStyle {
                height: 128rpx;
                border-radius: 24rpx;
                background-color: #F9F9F9;
                display: flex;
                /* align-items: center; */
                justify-content: space-between;
                padding: 30rpx 34rpx;
                box-sizing: border-box;
                margin-bottom: 32rpx;

                .title {
                    font-size: 32rpx;
                    margin-bottom: 5rpx;
                }

                .subTitle {
                    font-size: 24rpx;
                    color: #999999
                }
            }
        }
    }

    .botAddBtn {
        width: calc(100% - 60rpx);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90rpx;
        margin-left: 30rpx;
        margin-top: 20rpx;
        box-shadow: 0px 1px 8px 0px #00000014;
        border-radius: 24rpx;
        /* position: absolute;
        bottom: 160rpx;
        left: 30rpx; */
        bottom: 66rpx;
        background-color: #37B874;
        color: #fff;
    }

    .showFkPopupStyle {
        height: 920rpx;
        box-sizing: border-box;
        .khInfo {
            width: 500rpx;
            min-height: 260rpx;
            border-radius: 24rpx 0 24rpx 24rpx;
            background-color: #37B874;
            color: #fff;
            line-height: 52rpx;
            padding: 40rpx 10rpx 40rpx 40rpx;
        }

        .myInfo {
            width: 500rpx;
            min-height: 260rpx;
            border-radius: 24rpx 24rpx 24rpx 0;
            background-color: #F9F9F9;
            color: #000;
            line-height: 52rpx;
            padding: 40rpx 40rpx 40rpx 10rpx ;
        }
        .subTitle{
            color: #999;
            font-size: 24rpx;
        }
    }
}
</style>